<script setup>
import { ref } from "vue";
import { login } from "@/utils/auth.js";
import NavBar from "@/components/NavBar/index.vue";

const loginForm = ref({
  phone: undefined,
  code: undefined,
});

// mock
function handleLogin() {
  login();
  uni.switchTab({
    url: "/pages/Home/index",
  });
}
</script>

<template>
  <view>
    <div class="login-container">
      <NavBar></NavBar>
      <div class="content">
        <h1 class="welcome">欢迎来到绿贝生活小程序！</h1>
        <div class="input-group">
          <uv-input type="text" placeholder="手机号" />
        </div>
        <div class="input-group">
          <uv-input type="number" placeholder="验证码" />
          <button class="get-code-button">获取验证码</button>
        </div>
        <button class="login-button" @click="handleLogin">登录</button>
      </div>
    </div></view
  >
</template>

<style scoped>
.login-container {
  background: linear-gradient(180deg, #c3e4b3 0%, #f5fff0 100%);
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100vh;
}

.content {
  margin-top: 100px;
}

.welcome {
  font-size: 24px;
  margin-bottom: 60px;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  width: 100%;
  column-gap: 10px;
}

:deep(.uv-input) {
  height: 48px;
  padding-left: 10px;
  background-color: #f7fff3;
  color: #00000080 !important;
  border: none !important;
  font-size: 16px !important;
  box-shadow: none;
  outline: none;
  border-radius: 8px !important;
  box-sizing: border-box;
}

:deep(.uv-input__content__field-wrapper__field) {
  font-size: 16px !important;
}

.get-code-button {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  color: #ffffff;
  font-size: 16px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  height: 48px;
  width: fit-content;
}

.login-button {
  background: linear-gradient(90deg, #026217 0%, #04c82f 100%);
  width: 100%;

  padding-left: 10px;
  height: 48px;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 16px;
}
</style>
